<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>课程体系</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="cs/layui/css/layui.css">
    <link rel="stylesheet" href="cs/bootstrap.min.css">
    <style>
        #curriculum-system {
            display: none;
        }

        #curriculum-system .cs-top-tab {
            color: #c82011;
            font-size: 16px;
            margin: 40px 0;
        }

        #curriculum-system .cs-top-tab>span {
            margin-right: 45px;
            cursor: pointer;
        }

        #curriculum-system .cs-top-tab {}

        #curriculum-system .mytree {
            min-height: 20px;
            padding: 19px;
            margin-bottom: 20px;
        }

        #curriculum-system .mytree li {
            list-style-type: none;
            margin: 0;
            padding: 10px 5px 0;
            position: relative
        }

        #curriculum-system .mytree li::before,
        #curriculum-system .mytree li::after {
            content: '';
            left: -20px;
            position: absolute;
            right: auto
        }

        #curriculum-system .mytree li::before {
            border-left: 1px solid #999;
            bottom: 50px;
            height: 100%;
            top: 0;
            width: 1px
        }

        #curriculum-system .mytree li::after {
            border-top: 1px solid #999;
            height: 20px;
            top: 25px;
            width: 25px
        }

        #curriculum-system .mytree li span {
            border: 1px solid #999;
            display: inline-block;
            padding: 3px 8px;
            text-decoration: none
        }

        #curriculum-system .mytree li.parent_li>span {
            cursor: pointer
        }

        #curriculum-system .mytree>ul>li::before,
        #curriculum-system .mytree>ul>li::after {
            border: 0
        }

        #curriculum-system .mytree li:last-child::before {
            height: 30px
        }

        #curriculum-system .mytree li.parent_li>span:hover,
        #curriculum-system .mytree li.parent_li>span:hover+ul li span {
            background: #eee;
            border: 1px solid #94a0b4;
            color: #000
        }

        .publicBtn {
            display: inline-block;
            padding: 6px 30px;
            background: #c2040e;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }

        .cs-bg {
            padding: 200px 0px;
            text-align: center;
        }

        .add-cs-list div>div {
            height: 38px;
            line-height: 38px;
            font-size: 16px;
        }

        .add-cs-list div>div span {
            font-size: 14px;
            margin-left: 10px;
        }

        .two666 {
            position: relative;
        }

        .two666.active :after {
            content: "*";
            position: absolute;
            top: 0;
            right: 0;
            right: -18px;
            line-height: 38px;
            font-size: 30px;
            color: #c82011;
        }
        .linka{
            cursor: pointer;
        }
    </style>
    <script src="cs/jquery.min.js"></script>
    <script src="cs/layui/layui.js"></script>
    <script src="cs/formSelects.js"></script>

    <script>
        $(function () {
            treeInit();
            //init();
            selectInit();
            // layui.config({
            //     base: './cs/'
            // }).extend({
            //     formSelects: 'formSelects'
            // }).use(['form', 'formSelects'], function () {
            //     var form = layui.form,
            //         formSelects = layui.formSelects;


            //     let a = formSelects.value('a');			//获取选中的值
            //     formSelects.value('a', 'val');		//获取选中的val数组
            //     formSelects.value('a', 'name');		//获取选中的name数组
            //     //formSelects.value('a', [1, 3]);	//动态赋值
            //     console.log(a,66);
            // });
        });

        //红字点击
        function topTab() {
            if($(".two666").length){
                $(".two666").eq(0).addClass("active");
            }

        }

        //点击添加按钮
        function eAdd() {
            $(".biu").show();
            let form = layui.form,
                formSelects = layui.formSelects;
            formSelects.render({ name: "a" });
            formSelects.render({ name: "b" });
            formSelects.render({ name: "c" });
            formSelects.render({ name: "d" });
        }
        //添加option
        function selectInit() {
            setSelectOptions($('.select1'));
            setSelectOptions($('.select2'));
            setSelectOptions($('.select3'));
            setSelectOptions($('.select4'));
        }
        //数据
        function getSelectData() {
            let arr = [
                {
                    id: 1,
                    name: '分类算法类实验',
                    child: ["Python编程", "Python函数", "Python机器学习", "基于VGG16预训练模型的卷积神经网络", "基于Resnet预训练模型的卷积神经网络", "基于决策树的泰坦尼克号幸存者预测", "基于决策树优化模型的泰坦尼克号幸存者预测", "基于朴素贝叶斯分类器的幸存者预测", "基于决策树的鸢尾花分类预测", "基于tf-idf和NB的新闻分类预测模型", "基于Doc2Vec和NB的新闻分类预测模...", "基于PCA模型的鸢尾花数据可视化", "基于Apriori算法的商品推荐模型", "基于模型的协同过滤电影评分预测模型"]
                },
                {
                    id: 2,
                    name: '深度学习实验',
                    child: ["基于FP树的商品推荐模型", "基于随机森林的最高气温预测模型", "基于存在交互项多元线性回归的汽车油耗预测...", "基于PCA和随机森林的服装分类预测", "基于逻辑回归的鸢尾花分类预测", "kmeans、DBSCAN和谱聚类的聚类...", "基于t-SNE降维的学生成绩聚类模型", "基于因子分析的学生成绩降维模型", "基于DBSCAN算法的地震点聚类模型", "基于Bagging的糖尿病预测模型", "基于Adaboost与GBDT的糖尿病预...", "基于XGBoost的糖尿病预测模型", "基于lightGBM的糖尿病预测模型", "基于kmeans算法的学校聚类模型", "基于Kmodes算法的汽车聚类模型"]
                },
                {
                    id: 3,
                    name: '回归算法类实验',
                    child: ["回归模型-简单线性回归模型", " 回归模型-非线性回归模型", "回归模型-机器学习算法", "基于单变量线性回归的体重预测模型", "基于多元线性回归的汽车油耗预测模型", "基于岭回归的工资预测模型", "基于岭回归的多项式预测模型", "基于逻辑回归的鸢尾花多分类预测", "基于逻辑回归的电话营销客户分类预测", "基于逻辑回归的信用欺诈识别模型", "基于逻辑回归的非线性分类预测", "基于决策树的非线性回归模型"]
                },
                {
                    id: 4,
                    name: '机械学习',
                    child: ["机器学习简介", "线性回归", "逻辑回归", "决策树", "集成学习", "贝叶斯分类器", "支持向量机", "聚类", "降维", "推荐", "kmeans、DBSCAN和谱聚类的聚类...", "基于Bagging的糖尿病预测模型", "基于FP树的商品推荐模型", "基于kmeans算法的学校聚类模型", "基于lightGBM的糖尿病预测模型", "基于PCA模型的鸢尾花数据可视化", "基于t-SNE降维的学生成绩聚类模型", "基于tf-idf和NB的新闻分类预测模型", "基于决策树优化模型的泰坦尼克号幸存者预测", "基于决策树的泰坦尼克号幸存者预测", "基于决策树的非线性回归模型", "基于决策树的鸢尾花分类预测", "基于单变量线性回归的体重预测模型", "基于因子分析的学生成绩降维模型", "基于多元线性回归的汽车油耗预测模型", "基于岭回归的多项式预测模型", "基于岭回归的工资预测模型", "基于朴素贝叶斯分类器的幸存者预测", "基于模型的协同过滤电影评分预测模型", "基于逻辑回归的非线性分类预测", "基于逻辑回归的鸢尾花分类预测", "基于逻辑回归的鸢尾花多分类预测"]
                },
                {
                    id: 5,
                    name: '数据采集技术',
                    child: ["认识爬虫", "复杂HTML解析", "使用API", "存储数据", "自然语言处理", "忽略表单与登陆采集", "图像识别", "反爬虫策略", "认识爬虫-实验", "复杂HTML解析-实验", "使用API-实验", "存储数据-实验", "自然语言处理-实验", "忽略表单与登陆采集-实验", "图像识别-实验", "反爬虫策略-实验", "EXCEL爬虫1-实验", "EXCEL爬虫2-实验", "EXCEL爬虫3-实验"]
                },
                {
                    id: 6,
                    name: '数据清洗技术',
                    child: ["为什么需要清洗数据", "格式、类型与编码", "MR清洗技术", "其他清洗示例", "微博清洗示例", "大数据数据采集", "实体识别", "真值发现", "异常值发现", "时间序列清洗", "基于众包的数据清洗", "数据清洗过程的并行化", "数据清洗实践", "为什么需要清洗数据", "格式、类型与编码", "数据转换", "清洗来自网络的数据", "RDBMS清洗技术"]
                },
                {
                    id: 7,
                    name: '分布式计算框架',
                    child: ["MapRecude工作原理", "数据类型", "输入数据格式", "MapReduce Shuffle", "排序", "计数器", "表连接", "安全认证", "WordCount", "数据去重", "排序", "计算实例", "数据的关联规则(一)", "数据的关联规则(二)", "高级排序", "MapReduce 中的混排", "QQ 好友推荐案例设计与实现", "NlineInputFormat 输入格...", "微博精准营销案例设计与实现", "社交网络综合评分案例设计与实现", "数据库的输入格式化", "多路径输出", "WordCount 编程", "单表关联", "倒排序", "多表关联", "平均成绩", "去重编程", "数据排序", "数据清洗", "数据二次排序", "计数器", "求全年最高气温", "input 输入方式", "连接", "全排序", "物品推荐案例设计与实现"]
                },
                {
                    id: 8,
                    name: '大数据可视化技术',
                    child: ["大数据可视化概述", "视觉感知与认知", "数据", "数据可视化基础", "层次和网络数据可视化", "文本和文档可视化", "可视化中的交互", "可视化评测", "面向领域的数据可视化", "交互功能(二)", "交互功能(三)", "组件", "动画", "案例", "SVG技术", "D3开发环境搭建", "数据源", "D3组件", "绘图", "Echars基础", "生成器(一)", "生成器(二)", "生成器(三)", "动画基础", "动画高级应用", "动画组件", "动画应用", "D3交互", "事件", "文件操作(一)", "饼图", "文件操作(二)", "布局(一)", "布局(二)", "布局(三)", "布局(四)", "布局(五)", "布局(六)", "提示框", "交互元素", "区域限制", "柱状图", "开关", "地图数据源", "中国地图", "区域地图", "路径", "D3实例", "折线图", "Map", "K线图", "热力图", "树图", "交互功能(一)"]
                },
                {
                    id: 9,
                    name: '数据挖掘与分析',
                    child: ["关联规则", "决策树", "单变量线性回归、代价函数与梯度下降", "多变量线性回归", "机器学习简介", "聚类", "贝叶斯分类器", "逻辑回归", "降维", "集成学习", "SVM", "关联规则", "决策树", "逻辑回归"]
                },
                {
                    id: 10,
                    name: '分布式文件系统',
                    child: ["HDFS IO", "HDFS API高级应用", "初识大数据", "Hadoop简介", "Hadoop生态圈", "Hadoop架构", "环境搭建", "HDFS分布式文件系统", "分布式文件系统原理", "分布式文件系统架构", "HDFS API", "HDFS API", "Java操作HDFS", "HDFS IO", "环境搭建", "HDFS 删除文件或目录", "HDFS 查看文件及文件状态", "HDFS 重命名文件", "获取HDFS 下的所有文件及文件所在位", "置", "获取HDFS 集群所有节点名称信息", "FileSystemAPI 操作HDFS", "IO 序列化类型", "HDFS 字符处理", "Avro 文件的IO", "HDFS API 操作", "HDFS 命令操作", "压缩与解压缩", "Hadoop 集群环境搭建"]
                },
                {
                    id: 11,
                    name: 'Spark大数据编程技术',
                    child: ["Spark简介", "弹性分布式数据集RDD", "算子", "工作原理", "Spark组件之SparkSQL", "MLib基础", "MLib回归算法(一)", "MLib回归算法(二)", "支持向量机SVM", "随机森林算法", "聚类算法", "协同过滤算法", "MLib分类算法实例", "MLib聚类算法实例", "MLib协同过滤算法实例", "Spark基础", "环境搭建", "RDD API", "Spark HelloWorld", "Spark通过SQL连接数据源", "MLib基础", "MLib回归算法实例(一)", "MLib回归算法实例(二)", "MLib支持向量机算法实例"]
                }
            ];
            return arr;
        }
        //遍历option
        function setSelectOptions(obj) {
            let arr = getSelectData();
            $.each(arr, function (i, d) {
                //console.log(d);
                let op = $("<option></option>")
                    .val(d.id)
                    .text(d.name);
                obj.append(op);
            });
        }
        //提交option
        function selectSubmit() {
            $('.biu-close').trigger('click');
            $('.add-cs').hide();
            $('#curriculum-system').show();
            let form = layui.form,
                formSelects = layui.formSelects;


            let a = formSelects.value('a', 'val');			//获取选中的值
            let b = formSelects.value('b', 'val');			//获取选中的值
            let c = formSelects.value('c', 'val');			//获取选中的值
            let d = formSelects.value('d', 'val');			//获取选中的值
            // formSelects.value('a', 'val');		//获取选中的val数组
            // formSelects.value('a', 'name');		//获取选中的name数组
            //formSelects.value('a', [1, 3]);	//动态赋值
            let resu = [];
            let objA = setTree("第一学期", "s1", a);
            let objB = setTree("第二学期", "s2", b);
            let objC = setTree("第三学期", "s3", c);
            let objD = setTree("第四学期", "s4", d);
            resu.push(objA, objB, objC, objD);
            //console.log(resu, 55);

            $("#rootUL").empty();
            csTree(resu);
            //有数据
            if (resu.length) {
                $("#curriculum-system").show();
                $(".add-cs").hide();
            }
            else {
                $("#curriculum-system").hide();
                $(".add-cs").show();
            }
            treeInit();
        }

        //赋值tree
        function setTree(fname, code, arrids) {
            let arr = getSelectData();
            let newArr = arr.filter(item => arrids.some(x => x == item.id));
            $.each(newArr, function (i, d) {
                d.icon = "icon-minus-sign";
                d.code = code + d.id;
                d.isTwo = "666";
                d.parentCode = code;
                let arrChildEnd = [];
                $.each(d.child, function (i2, d2) {
                    //console.log(d2, 3);
                    let obj = {
                        name: d2,
                        parentCode: d.code,
                        child: []
                    };
                    arrChildEnd.push(obj);
                });
                d.child = arrChildEnd;
                //console.log(d, 2);
            });
            //console.log(newArr, 123);
            let obj = {
                name: fname,
                code: code,
                "icon": "icon-th",
                child: newArr
            };
            // "icon": "icon-minus-sign",
            //             "code": "GZZKCH",
            //             "parentCode": "ZKCH",
            return obj;
        }

        function init() {
            if (1) {
                $(".add-cs").show();
                $("#curriculum-system").hide();
            }
            else {
                treeInit();
            }
        }


        function csTree(data) {
            for (var i = 0; i < data.length; i++) {
                var data2 = data[i];
                if (data[i].icon == "icon-th") {
                    $("#rootUL").append("<li data-name='" + data[i].code + "'><span><i class='" + data[i].icon + "'></i> " + data[i].name + "</span></li>");
                } else {
                    var children = $("li[data-name='" + data[i].parentCode + "']").children("ul");
                    if (children.length == 0) {
                        $("li[data-name='" + data[i].parentCode + "']").append("<ul></ul>")
                    }
                    $("li[data-name='" + data[i].parentCode + "'] > ul").append("<li data-name='" + data[i].code + "'>" +
                        "<a>"+
                        "<span class='linka'>" +
                        "<i class='" + data[i].icon + "'></i> " +
                        data[i].name +
                        "</span>" +
                        "</a>"+
                        "</li>");
                }
                for (var j = 0; j < data[i].child.length; j++) {
                    var child = data[i].child[j];
                    var children = $("li[data-name='" + child.parentCode + "']").children("ul");
                    if (children.length == 0) {
                        $("li[data-name='" + child.parentCode + "']").append("<ul></ul>")
                    }
                    $("li[data-name='" + child.parentCode + "'] > ul").append("<li data-name='" + child.code + "' >" +

                        "<span >" +
                        "<i class='" + child.icon + "'></i> " +
                        child.name +
                        "</span>" +

                        "</li>");

                    //二级加标识
                    if (child.isTwo) {
                        $("li[data-name='" + child.code + "'] > span").addClass("two666");
                    }
                    var child2 = data[i].child[j].child;
                    csTree(child2)
                }
                csTree(data[i]);
            }
        }

        function treeInit() {
            var json = [
                {
                    "name": "中科慈航",
                    "code": "ZKCH",
                    "icon": "icon-th",
                    "child": [{
                        "name": "广州中科慈航",
                        "icon": "icon-minus-sign",
                        "code": "GZZKCH",
                        "parentCode": "ZKCH",
                        "child": [{
                            "name": "广州中科慈航天河区分行",
                            "code": "GZZKCHTQFH",
                            "icon": "",
                            "parentCode": "GZZKCH",
                            "child": []
                        }]
                    }, {
                        "name": "北京中科慈航",
                        "icon": "",
                        "code": "BJZKCH",
                        "parentCode": "ZKCH",
                        "child": [{
                            "name": "北京中科慈航中城区分行",
                            "code": "BJZKCHZCFH",
                            "icon": "",
                            "parentCode": "BJZKCH",
                            "child": []
                        }]
                    }]
                },
                {
                    "name": "中科科技",
                    "code": "ZKKJ",
                    "icon": "icon-th",
                    "child": [{
                        "name": "广州中科科技",
                        "code": "GZZKKJ",
                        "icon": "icon-minus-sign",
                        "parentCode": "ZKKJ",
                        "child": [{
                            "name": "广州天河中科科技",
                            "code": "GZTHZKKJ",
                            "icon": "",
                            "parentCode": "GZZKKJ",
                            "child": []
                        }]
                    }]
                }];

            let json4 = [
                {
                    "name": "第一学期",
                    "code": "dyxq",
                    "icon": "icon-th",
                    "child": [
                        {
                            "id": 1,
                            "name": "分类算法类实验",
                            "code": "1",
                            "icon": "icon-minus-sign",
                            "child": ["Python编程", "Python函数", "Python机器学习", "基于VGG16预训练模型的卷积神经网络", "基于Resnet预训练模型的卷积神经网络", "基于决策树的泰坦尼克号幸存者预测", "基于决策树优化模型的泰坦尼克号幸存者预测", "基于朴素贝叶斯分类器的幸存者预测", "基于决策树的鸢尾花分类预测", "基于tf-idf和NB的新闻分类预测模型", "基于Doc2Vec和NB的新闻分类预测模...", "基于PCA模型的鸢尾花数据可视化", "基于Apriori算法的商品推荐模型", "基于模型的协同过滤电影评分预测模型"]
                        },
                        {
                            "id": 2,
                            "name": "深度学习实验",
                            "child": ["基于FP树的商品推荐模型", "基于随机森林的最高气温预测模型", "基于存在交互项多元线性回归的汽车油耗预测...", "基于PCA和随机森林的服装分类预测", "基于逻辑回归的鸢尾花分类预测", "kmeans、DBSCAN和谱聚类的聚类...", "基于t-SNE降维的学生成绩聚类模型", "基于因子分析的学生成绩降维模型", "基于DBSCAN算法的地震点聚类模型", "基于Bagging的糖尿病预测模型", "基于Adaboost与GBDT的糖尿病预...", "基于XGBoost的糖尿病预测模型", "基于lightGBM的糖尿病预测模型", "基于kmeans算法的学校聚类模型", "基于Kmodes算法的汽车聚类模型"]
                        }]
                }]


            $('.mytree li:has(ul)').addClass('parent_li').find(' > span').attr('title', '关闭');
            $('.mytree li.parent_li > span').off().on('click', function (e) {
                var children = $(this).parent('li.parent_li').find(' > ul > li');
                if (children.is(":visible")) {
                    children.hide('fast');
                    $(this).attr('title', '展开').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
                } else {
                    children.show('fast');
                    $(this).attr('title', '关闭').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
                }
                e.stopPropagation();
            });
        }

        //跳转
        $(document).on('click','.linka',function(){

            var e = '{"courseId":37}';
            window.location.href = "/SchoolMS2.0/skipCourseStudyDetail?jsonStr=" + e


        })


    </script>
</head>

<body class="inner_body">
    <!-- 添加弹出层 -->
    <div class="biu">
        <div class="biu-bg"></div>
        <div class="biu-box">
            <div class="biu-title">
                添加
                <div class="biu-close" onclick="$('.biu').hide()"></div>
            </div>
            <div class="biu-main">
                <div style="margin:10px; color:#717171;"><span style="font-size: 18px;">提示：</span>多次选择可选多个课程。</div>
                <div class="add-cs-list">
                    <div class="clearfix">
                        <div>第一学期<span>选择课程：</span></div>
                        <select class="myselect select1" xm-select="a" name="a" xm-select-type="1">
                        </select>
                    </div>
                    <div class="clearfix">
                        <div>第二学期<span>选择课程：</span></div>
                        <select class="myselect select2" xm-select="b" name="b" xm-select-type="1">
                        </select>
                    </div>
                    <div class="clearfix">
                        <div>第三学期<span>选择课程：</span></div>
                        <select class="myselect select3" xm-select="c" name="c" xm-select-type="1">
                        </select>
                    </div>
                    <div class="clearfix">
                        <div>第四学期<span>选择课程：</span></div>
                        <select class="myselect select4" xm-select="d" name="d" xm-select-type="1">
                        </select>
                    </div>
                </div>
            </div>
            <div class="biu-footer">
                <div class="biu-btn" onclick="selectSubmit()">提交</div>
            </div>
        </div>
    </div>
    <div class="crumbs">
        <div class="index-img"></div>
        <a href="javascript:void(0)" onclick="window.parent.location.reload();" class="sy">首页</a><label>&gt;</label><a href="javascript:void(0)"
            class="mbx">课程体系</a>
    </div>
    </div>
    <div class="content_box">
        <div class="title_nav">
            <div class="title_box_select fl active" id="table_one">课程体系</div>
        </div>
        <div class="panel">
            <!-- 无内容添加 -->
            <div class="add-cs clearfix">
                <div style="margin:2px 0 0 20px;" class="fr publicBtn searchBtn" onclick="eAdd();">
                    添加</div>
                <div class="cs-bg">
                    <img src="img/cs.jpg" />
                </div>
            </div>
            <!-- 有内容展示 -->
            <div id="curriculum-system">
                <div class="cs-top-tab">
                    <span onclick="topTab()">大数据采集工程师</span>
                    <span onclick="topTab()">大数据开发工程师</span>
                    <span onclick="topTab()">大数据可视化工程师</span>
                    <span onclick="topTab()">大数据清洗工程师</span>
                    <span onclick="topTab()">大数据运维工程师</span>
                    <div style="margin:2px 0 0 20px;" class="fr publicBtn searchBtn" onclick="eAdd();">添加
                    </div>
                </div>
                <div class="mytree">
                    <ul id="rootUL">
                    </ul>
                </div>
            </div>
        </div>
    </div>

</body>

</html>